<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="/js/vue.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="../static/js/jquery-3.1.1.min.js"></script>
		<style>
		.login-one{
		  background-image:url(/image/bj.jpg);
		  background-size: cover;
		  background-repeat:no-repeat;
		  overflow:hidden;
		  height: 100%;
		}

		  .el-header, .el-footer {
		    color: white;
			padding-top: 10px;
		  }

		  .el-aside {
		    background-color: white;
			height: 100%;
		  }

		  .el-main {
	/* 		 background-image:url(../image/bj.jpg); */
			  overflow: hidden;
			 height: 100%;
		  }
		  .el-container{
			  height: 100%;
		  }
		  html,body{
			 height: 100%;
			 margin: 0px;
		  }
		</style>
	</head>
	<body>
		<div id="app" style="height: 100%;">
			<el-container>
			  <el-header class="login-one">
				  <el-col :span="8">
					     <span>人力资源管理系统</span>
				  </el-col>
				   <el-col :span="8">
					   &nbsp;
				   </el-col>
				    <el-col :span="8" align="right">
						<el-button type="success" size="mini">修改密码</el-button>
						<el-button type="success" size="mini" @click="toUrl('info','个人信息设置页面')">个人信息设置</el-button>
						<el-button type="success" size="mini" @click="exit">退出登录</el-button>
						<el-avatar size="small" :src="circleUrl"></el-avatar>
						<span>{{name}}</span>
					</el-col>

			  </el-header>
			  <el-container>
			    <el-aside width="200px">
					<el-menu
						:default-openeds=['1']
					 class="el-menu-vertical-demo"
					>
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-s-tools"></i>
							<span>系统管理</span>
						</template>
						<el-menu-item @click="toUrl('default.html','系统首页')">
							<i class="el-icon-user-solid"></i>
							<span>系统首页</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('/list','用户管理')">
							<i class="el-icon-user-solid"></i>
							<span>用户管理</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('/list2','员工管理')">
							<i class="el-icon-user-solid"></i>
							<span>员工管理</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('student_list.html','权限管理')">
							<i class="el-icon-user-solid"></i>
							<span>权限管理</span>
						</el-menu-item>

					</el-submenu>



					</el-menu>
				</el-aside>

			    <el-main>
				<el-tag
				 type="warning"
				@click="openUrl(tag.url)"
				  :key="tag.name"
				  v-for="tag in tags"
				  closable
				  :disable-transitions="false"
				  @close="handleClose(tag.name)" style="position:relative;top:-20px;left: -20px;cursor: pointer;">
				  {{tag.name}}
				</el-tag>
					<iframe :src="url" height="100%" width="100%" style="border: solid 0px;">

					</iframe>
				</el-main>
			  </el-container>
			</el-container>
		</div>
	</body>
	<script>
			var index = new Vue({
				el:"#app",
				data:{
					name:"",//
					tags: [{name:"系统首页",url:"/list"}],
					url:"/list",
					circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
				},
				mounted() {
					this.name = sessionStorage.getItem("name");
					this.circleUrl = sessionStorage.getItem("imageUrl");
				},
				methods:{
					exit(){
						// 清除sessionStorage的数据
						sessionStorage.clear();
						// 跳转到登录页面
						window.location.href="/login";
					},
					 toUrl:function(url,name){
						 this.url = url;
						 var is = false;
						 for (var i=0;i<this.tags.length;i++){
							 if(this.tags[i].name==name){
								 is = true;
							 }
						 }
						if(is==false){
							this.tags.push({"name":name,"url":url});
						}


					 },
					handleClose(name) {
					    if(name=="系统首页"){
							this.$message({
								message:"系统首页不能关闭",
								type:"error"
							})
							return;
						}
						var is = false;
						 for (var i=0;i<this.tags.length;i++){
							 if(this.tags[i].name==name){
								   this.tags.splice(this.tags.indexOf(this.tags[i]), 1);
							 }
						 }

						this.url="/list";
					},
					openUrl:function(url){
						this.url = url;


					}
				}

			})

	</script>
</html>
